<template>
  <el-card style="width: 100%;height: 50px;"><span style="font-size: 20px;"><b>会议室管理</b></span></el-card>
  <el-card style="width: 100%" shadow="always">
    <el-form :inline="true" :model="search" class="demo-form-inline">
      <el-form-item>
        <el-input v-model="search.DepartmentName" placeholder="请输入会议室名称" clearable />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
        <el-button type="primary" plain @click="">重置</el-button>
      </el-form-item>
    </el-form>
    <el-form :inline="true">
      <el-button type="primary" @click="AddMeetRoom">新增</el-button>
      <el-button type="primary" @click="onSubmit">批量删除</el-button>
    </el-form>
    <el-table :data="tableData" border style="width: 100%;margin-top: 20px;">
      <el-table-column prop="date" label="会议室名称" />
      <el-table-column prop="name" label="容纳人数" />
      <el-table-column prop="name" label="会议室位置" />
      <el-table-column prop="name" label="管理员" />
      <el-table-column prop="name" label="联系电话" />
      <el-table-column prop="name" label="预约审批">
        <template v-slot="scope">
          <span v-if="scope.row.status">是</span>
          <span v-else>否</span>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="智能会议室">
        <template v-slot="scope">
          <span v-if="scope.row.status">是</span>
          <span v-else>否</span>
        </template>
      </el-table-column>
      <el-table-column prop="" label="操作">
        <template v-slot="scope">
          <el-button type="text" @click="">查看</el-button>
          <el-button type="text" @click="EditMeetRoom(scope.row)">修改</el-button>
          <el-button type="text" @click="">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <Pagination :current-page="page.pageIndex" :page-size="page.pageSize" :total-count="page.totalCount"
      :total-page="page.totalPage" @size-change="handleSizeChange" @current-change="handleCurrentChange"
      style="display: flex;justify-content: right;">
    </Pagination>
  </el-card>

  <!-- 新增按钮弹框 -->

  <el-dialog v-model="meetRoomDialog" :title=title width="700" align-center>
    <el-form ref="ruleFormRef" style="max-width: 100%" :model="ruleForm" :rules="rules" label-width="auto">
      <el-row>
        <el-clo :span="12">
          <el-form-item label="会议名称" prop="name">
            <el-input v-model="ruleForm.name" />
          </el-form-item>
          <el-form-item label="容纳人数" prop="region">
            <el-select v-model="ruleForm.region" placeholder="Activity zone">
              <el-option label="Zone one" value="shanghai" />
              <el-option label="Zone two" value="beijing" />
            </el-select>
          </el-form-item>
          <el-form-item label="会议室位置" prop="region">
            <el-select v-model="ruleForm.region" placeholder="Activity zone">
              <el-option label="Zone one" value="shanghai" />
              <el-option label="Zone two" value="beijing" />
            </el-select>
          </el-form-item>
          <el-form-item label="会议室管理员" prop="name">
            <el-input v-model="ruleForm.name" />
          </el-form-item>
          <el-form-item label="联系电话" prop="name">
            <el-input v-model="ruleForm.name" />
          </el-form-item>
        </el-clo>
        <el-clo :span="12">
          <el-form-item style="margin-top: 20px;margin-left: 80px;">
            <el-upload class="avatar-uploader" action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
              :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
              <img v-if="imageUrl" :src="imageUrl" class="avatar" />
              <el-icon v-else class="avatar-uploader-icon">
                <Plus />
              </el-icon>
            </el-upload>
          </el-form-item>
        </el-clo>
      </el-row>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="submitForm(ruleFormRef)">保存</el-button>
        <el-button @click="resetForm(ruleFormRef)">重置</el-button>
        <el-button @click="meetRoomDialog = false">关闭</el-button>
      </div>
    </template>
  </el-dialog>



</template>
<script lang="ts" setup>
import { reactive, ref } from 'vue'
import Pagination from '@/components/Pagination.vue'
import type { FormInstance, FormRules } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import type { UploadProps } from 'element-plus'
import { ElMessage } from 'element-plus'


//#region 弹框表单相关
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive({
  name: '',
  region: '',
  count: '',
  date1: '',
  date2: '',
  delivery: false,
  location: '',
  type: [],
  resource: '',
  desc: '',
})
// 表单验证规则
const rules = reactive<FormRules>({
  name: [
    { required: true, message: 'Please input Activity name', trigger: 'blur' },
    { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
  ],
  region: [
    {
      required: true,
      message: 'Please select Activity zone',
      trigger: 'change',
    },
  ],
  count: [
    {
      required: true,
      message: 'Please select Activity count',
      trigger: 'change',
    },
  ],
  date1: [
    {
      type: 'date',
      required: true,
      message: 'Please pick a date',
      trigger: 'change',
    },
  ],
  date2: [
    {
      type: 'date',
      required: true,
      message: 'Please pick a time',
      trigger: 'change',
    },
  ],
  location: [
    {
      required: true,
      message: 'Please select a location',
      trigger: 'change',
    },
  ],
  type: [
    {
      type: 'array',
      required: true,
      message: 'Please select at least one activity type',
      trigger: 'change',
    },
  ],
  resource: [
    {
      required: true,
      message: 'Please select activity resource',
      trigger: 'change',
    },
  ],
  desc: [
    { required: true, message: 'Please input activity form', trigger: 'blur' },
  ],
})
//添加/修改
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log('submit!')
    } else {
      console.log('error submit!', fields)
    }
  })
}
//重置表单
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}
//#endregion

//#region   上传图片
const imageUrl = ref('')

const handleAvatarSuccess: UploadProps['onSuccess'] = (
  response,
  uploadFile
) => {
  imageUrl.value = URL.createObjectURL(uploadFile.raw!)
}

const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
  if (rawFile.type !== 'image/jpeg') {
    ElMessage.error('Avatar picture must be JPG format!')
    return false
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('Avatar picture size can not exceed 2MB!')
    return false
  }
  return true
}

//#endregion


//查询条件
const search = reactive({
  DepartmentName: '',
})
//数据展示
const tableData = ref([])


//# region  弹窗相关
//标题
const title = ref('')
const meetRoomDialog = ref(false)
//新增打开弹框
const AddMeetRoom = () => {
  title.value = '新增会议室'
  meetRoomDialog.value = true
}

//修改打开弹框
const EditMeetRoom = (row: any) => {
  title.value = '修改会议室'
  meetRoomDialog.value = true
}

//#endregion

//#region  分页相关
const page = reactive({
  pageIndex: 1,
  pageSize: 10,
  totalCount: 0,
  totalPage: 0
})
const handleSizeChange = (val: number) => {
  page.pageSize = val
}
const handleCurrentChange = (val: number) => {
  page.pageIndex = val
}

//#endregion

const onSubmit = () => {
  console.log('submit!')
}
</script>

<!-- 查询css 样式 -->
<style>
.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}
</style>

<!-- 上传图片相关css -->
<style scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>